import React, { useState } from 'react'
import { Layout, Dropdown, Avatar, Menu } from 'antd';
import {
	MenuUnfoldOutlined,
	MenuFoldOutlined,
} from '@ant-design/icons';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import { } from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
const { Header } = Layout;

function TopHeader(props) {
	console.log(props.isCollapsde);
	const {role:{roleName},username}=JSON.parse(localStorage.getItem("token")) 
	const menu = (
		<Menu>

			<Menu.Item icon={<DownOutlined />} >
				{roleName}
			</Menu.Item>
			<Menu.Item danger onClick={()=>{
				console.log(props.history);
				localStorage.removeItem("token")
				props.history.replace("/login")
			}}>退出</Menu.Item>
		</Menu>
	);
	// const [collapsed, setcollapsed] = useState(props.isCollapsde)

	const change_collapse=()=>{

		props.changeCollapsed()
	}
	return (
		<Header className="site-layout-background" style={{ padding: '0 16px' }}>
			{/* {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
          className: 'trigger',
          onClick: this.toggle,
        })} */}
			{
				props.isCollapsde ? <MenuUnfoldOutlined onClick={change_collapse} /> : <MenuFoldOutlined onClick={change_collapse} />
			}
			<div style={{ float: "right" }}>
				<span>欢迎 <span style={{color:"#18900f"}}>{username}</span> </span>
				<Dropdown overlay={menu}>
					<Avatar src="https://joeschmoe.io/api/v1/random" />
				</Dropdown>
			</div>
		</Header>
	)
}
const mapStatetoProps=({collapsedReducer:{isCollapsde}})=>{

	return {
		isCollapsde
	}
}
const mapDispatchtoProps={
	changeCollapsed(){
		return{
			type:"change_collapsed",
		}
	}
}
export default connect(mapStatetoProps,mapDispatchtoProps)(withRouter(TopHeader))  
